import React from "react";
import { ReactEmojiEditor } from "react-emotor";

const App = () => {
  function contentOnChange(content: any) {
    console.log(content);
  }

  return (
    <ReactEmojiEditor
      onChange={(content: any) => {
        contentOnChange(content);
      }}
    />
  );
};

export default App;

// import React, { useRef } from "react";
// import { ReactEmojiEditor } from "react-emotor";

// interface HION {
//   clean: Function;
//   onFocus: Function;
// }

// const App = () => {
//   // 创建ref用于接收编辑框组件的节点对象,
//   const emotor = useRef({} as HION);

//   // 组件内容改变回调函数
//   function contentOnChange(content: any) {
//     console.log(content);
//   }

//   // 清空组件内容
//   function myClean() {
//     console.log("clean");
//     emotor.current.clean();
//   }

//   // 组件获取焦点
//   function myFocus() {
//     console.log("onFocus");
//     emotor.current.onFocus();
//   }

//   return (
//     <div>
//       <ReactEmojiEditor
//         ref={emotor}
//         className="myClassName"
//         id="myEmotor"
//         defaultValue="this is default value 😀😀😀"
//         onChange={(content: any) => contentOnChange(content)}
//       />
//       <button onClick={myClean}>清空</button>
//       <button onClick={myFocus}>聚焦</button>
//     </div>
//   );
// };

// export default App;
